グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion

データアナリティクス事業本部 サービスソリューション部 サービス開発チームのしんやです。

Notionの直近リリースノートに「Mermaidっていうマークダウン構文がNotionで使えるようになったよ！」という情報が載っていたので、試してみた内容を軽くではありますが紹介したいと思います。

目次

• Mermaidとは
• 実践
  • #1. フローチャート
  • #2. シーケンス図
  • #3. クラス図
  • #4. 状態遷移図
  • #5. ER図
  • #6. ジャーニーマップ
  • #7. ガントチャート
  • #8. パイチャート
  • #9. 要件図
• まとめ

　

Mermaidとは

Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。

コードから良い感じのグラフを生成できるイメージについては下記動画を参照頂くと良さそうです。

　

実践

では早速実践してみたいと思います。Mermaid Markdown構文はコードブロック内で利用・展開が可能となっています。なので /code または ``` でコードブロック作成を呼び出してください。

呼び出せたら言語指定で「Mermaid」を選ぶだけです。簡単！

表示形式は「コード(コードだけ出す)」「プレビュー(図だけ出す)」「分割(両方まとめて出す)」を選ぶことが出来ます。ここではコードと図を両方出す「分割」で進めたいと思います。

基本的には「Mermaid Markdown構文のコードを記載する」だけです。では主な「表示可能なグラフ」の一覧を以降の項で紹介します。

　

#1. フローチャート

• Flowchart

　

#2. シーケンス図

• Sequence diagram

　

#3. クラス図

• Class Diagram

　

#4. 状態遷移図

• State Diagram

　

#5. ER図

• Entity Relationship Diagram

　

#6. ジャーニーマップ

• User Journey

　

#7. ガントチャート

• Gantt

　

#8. パイチャート

• Gantt

　

#9. 要件図

• Requirement Diagram

　

まとめ

という訳で、Notionで利用出来るようになりましたよ！という内容の紹介でした。

今回はサラッとした紹介に留まりましたが、Mermaidの諸々の機能がNotionでも利用出来る(というかMermaidの便利さをNotionでも享受出来る)というのを知ってちょっと早朝からテンションが上がりました。この辺の仕組みもフル活用して今後のドキュメント活動をよりクオリティ高いものにしていきたいと思います！

• Notion の記事一覧 | DevelopersIO